<template>
  <div class="table">
    <div class="container">
      <div class="handler-box">
        <el-input v-model="selectKey" size="mini"placeholder="请输入歌单名" class="handle-input"></el-input>
        <el-button type="primary" size="mini" @click="centerDiaLogVisible=true">添加歌单</el-button>
        <el-button type="danger" size="mini" @click="handlerDeleteAll">全部删除</el-button>
      </div>
    </div>
    <!--    歌曲列表-->
    <el-table size="mini" border style="width: 100%;height:600px" max-height="500" @selection-change="handlerSelectionChange" :data="data">
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column label="歌单图片" width="110"  align="center">
        <template slot-scope="scope">
          <div class="singer-img">
            <img :src="scope.row.pic" style="width: 100%"/>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="标题" width="100" align="center" prop="title"></el-table-column>
      <el-table-column label="简介" width="700" align="center" prop="introduction"></el-table-column>
      <el-table-column label="风格" width="70" align="center" prop="style"></el-table-column>
      <el-table-column label="操作" width="331" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handlerRemake(scope.row.id)">评论</el-button>
          <el-button size="mini" @click="handlerEdit(scope.row)" type="primary">编辑</el-button>
          <el-button size="mini" @click="handlerDelete(scope.row.id)" type="danger">删除</el-button>
          <el-button size="mini" @click="handlerGoSongList(scope.row.id)" type="success">歌曲</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background layout="total,prev,pager,next"
                     :current-page="currentPage"
                     :page-size="pageSize"
                     :total="tableData.length"
                     @current-change="handlerChange"
      >
      </el-pagination>
    </div>
    <el-dialog
        title="添加歌单"
        :visible="centerDiaLogVisible"
        width="400px"
        center
        :show-close="false"
    >
      <el-form :model="registerForm" ref="registerForm" label-width="80px">
        <el-form-item prop="title" label="歌单名" size="mini">
          <el-input v-model="registerForm.title" placeholder="歌单名"></el-input>
        </el-form-item>
        <el-form-item prop="pic" label="歌单图片" size="mini">
          <el-upload action="#"
                     :http-request="upload"
                     accept="image/jpeg,image/jpg,image/png"
                     :before-upload="beforeUpload"
          >
            <el-button size="mini">上传歌单图片</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="简介" size="mini" prop="introduction">
          <el-input v-model="registerForm.introduction" placeholder="简介"></el-input>
        </el-form-item>
        <el-form-item prop="style" label="风格" size="mini">
          <el-input v-model="registerForm.style" placeholder="风格"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="mini" @click="centerDiaLogVisible=false">取消</el-button>
        <el-button size="mini" @click="addSinger">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
        title="编辑歌单"
        :visible="editVisible"
        width="400px"
        center
        :show-close="false"
    >
      <el-form :model="editForm" ref="editForm" label-width="80px">
        <el-form-item prop="title" label="歌单名" size="mini">
          <el-input v-model="editForm.title" placeholder="歌单名"></el-input>
        </el-form-item>
        <el-form-item prop="pic" label="歌曲图片" size="mini">
          <el-upload action="#"
                     :http-request="upload"
                     accept="image/jpeg,image/jpg,image/png"
                     :before-upload="beforeUpload"
          >
            <el-button size="mini">上传歌单图片</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item prop="introduction" label="简介" size="mini">
          <el-input v-model="editForm.introduction" placeholder="简介"></el-input>
        </el-form-item>
        <el-form-item prop="style" label="风格" size="mini">
          <el-input v-model="editForm.style" placeholder="风格"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="mini" @click="editVisible=false">取消</el-button>
        <el-button size="mini" @click="editSinger">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
        title="删除歌单"
        :visible="deleteVisible"
        width="300px"
        center
        :show-close="false"
    >
      <div align="center">是否删除该歌单!!</div>
      <span slot="footer">
        <el-button size="mini" @click="deleteVisible=false">取消</el-button>
        <el-button size="mini" @click="deleteSinger">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
        title="删除全部歌单"
        :visible="deleteAllVisible"
        width="300px"
        center
        :show-close="false"
    >
      <div align="center">是否删除全部歌单!!</div>
      <span slot="footer">
        <el-button size="mini" @click="deleteAllVisible=false">取消</el-button>
        <el-button size="mini" @click="deleteAll">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import COS from "cos-js-sdk-v5";
import {mapState} from 'vuex'
export default {
  name: "SongList",
  data(){
    return{
      id:'',
      centerDiaLogVisible:false,
      editVisible:false,
      deleteVisible:false,
      deleteAllVisible:false,
      //添加框
      registerForm:{
        title:'',
        pic:'',
        introduction:'',
        style:''
      },
      //编辑框
      editForm:{
        id:'',
        title:'',
        pic:'',
        introduction:'',
        style:''
      },
      //歌曲列表
      tableData:[],
      tempData:[],
      selectKey:'',
      pageSize:5,
      currentPage:1,
      idx:'',
      multipleSelection:[] //哪些已经打勾了
    }
  },
  methods:{
    //添加歌曲
    async addSinger(){
      //解构参数
      let {title,introduction,pic,style}=this.registerForm
      let params=new URLSearchParams()
      params.append("title",title)
      params.append("pic",pic)
      params.append("introduction",introduction)
      params.append("style",style)
      let result=await this.$API.reqAddSongList(params)
      if (result.code==10000){
        this.centerDiaLogVisible=false
        await this.getData()
        this.$notify.success('添加歌单成功')
      }else {
        this.$notify.error('添加歌单失败')
      }
    },
    //弹出编辑页面
    handlerEdit(row){
      this.editVisible=true
      this.editForm={
        id:row.id,
        title:row.title,
        pic:row.pic,
        introduction:row.introduction,
        style:row.style
      }
    },
    //保存编辑页面
    async editSinger(){
      //解构参数
      let {id,title,introduction,pic,style}=this.editForm
      let params=new URLSearchParams()
      params.append("id",id)
      params.append("title",title)
      params.append("introduction",introduction)
      params.append("pic",pic)
      params.append("style",style)
      let result=await this.$API.reqUpdateSongList(params)
      if (result.code==10000){
        this.editVisible=false
        await this.getData()
        this.$notify.success('添加歌单成功')
      }else {
        this.$notify.error('添加歌单失败')
      }
    },
    //弹出删除窗口
    handlerDelete(id){
      this.idx=id
      this.deleteVisible=true
    },
    handlerDeleteAll(id){
      this.idx=id
      this.deleteAllVisible=true
    },
    async deleteSinger(){
      let result=await  this.$API.reqDeleteSongList(this.idx)
      if (result.code==10000){
        await this.getData()
        this.deleteVisible=false
        this.$notify.success('删除歌单成功')
      }else {
        this.$notify.error('删除歌单失败')
      }
    },
    //查询全部歌曲
    async getData(){
      let result=await this.$API.reqShowAllSongList()
      if (result.code==10000){
        this.tempData=result.data
        this.tableData=result.data
      }else{
        this.$notify.error('系统异常')
      }
    },
    handlerSelectionChange(val){
      this.multipleSelection=val
    },
    deleteAll(){
      for (let item of this.multipleSelection){
        this.handlerDeleteAll(item.id)
        this.deleteSinger()
      }
      this.deleteAllVisible=false
      this.multipleSelection=[]
    },
    //更新前校验图片
    beforeUpload(file){
      const isJPG=(file.type==='image/jpeg')||(file.type==='image/png')
      if (!isJPG){
        this.$message.error('只支持上传 jpg / png  格式的图片')
        return false
      }
      const isLt2M=(file.size/1024/1024)<2
      if (!isLt2M){
        this.$message.error('上传图片大于2M')
        return false
      }
      return true
    },
    //添加图片
    upload(res) {
      const cos = new COS({
        SecretId: this.SecretId, // 身份识别ID
        SecretKey: this.SecretKey // 身份秘钥
      })
      let file='.'+res.file.name.split('.')[1]
      if (res.file) {
        //上传图片
        cos.putObject({
          Bucket: this.Bucket, /* 存储桶 */
          Region: this.Region, /* 存储桶所在地域，必须字段 */
          Key: this.Key+'/img/songListPic/'+res.file.uid+file, /* 文件名 */
          StorageClass: this.StorageClass, // 上传模式, 标准模式
          Body: res.file // 上传文件对象
        }, async (err, data) => {
          // 上传成功之后
          if (data.statusCode === 200) {
            this.$notify.success('文件上传成功')
            this.registerForm.pic='https://'+data.Location
          }
        })
      }
    },
    //分页跳转
    handlerChange(val){
      this.currentPage=val
    },
    //跳转到歌单歌曲页面
    handlerGoSongList(id){
      let songListId=id
      this.$router.push({path:'/listsong',query:{songListId}})
    },
    //跳转到评论界面
    handlerRemake(id){
      let songListId=id
      this.$router.push({path:'/remake',query:{songListId}})
    }
  },
  mounted() {
    this.getData()
    this.$store.dispatch('showTencent')
  },
  watch:{
    //监听输入框里面的内容，跟随变化
    selectKey(){
      if (this.selectKey==''){
        this.tableData=this.tempData
      }else {
        this.tableData=[]
        for (let item of this.tempData){
          if (item.title.includes(this.selectKey)){
            this.tableData.push(item)
          }
        }
      }
    }
  },
  computed:{
    data(){
      return this.tableData.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
    },
    ...mapState({
      SecretId:state => state.tencent.SecretId,
      SecretKey:state => state.tencent.SecretKey,
      Bucket:state => state.tencent.Bucket,
      Region:state => state.tencent.Region,
      Key:state => state.tencent.Key,
      StorageClass:state => state.tencent.StorageClass
    })
  }
}
</script>

<style scoped>
.handler-box{
  margin-bottom: 20px;
}
.singer-img{
  width: 100%;
  height: 60px;
  border-radius: 5px;
  margin-bottom: 5px;
  overflow: hidden;
}
.handle-input{
  width: 300px;
  display: inline-block;
}
.pagination{
  display: flex;
  justify-content: center;
}
</style>
